<template>
	<view class="login">
		<view class="logo"><image src="../../static/img/logo1.png" mode="widthFix"></image></view>

		<view class="form-group">
			<view class="form-group-item">
				<u-form-item label="邮箱"><u-input v-model="entity.email" :clearable="false" type="email" placeholder="请输入邮箱地址" /></u-form-item>
			</view>

			<view class="form-group-item">
				<u-form-item label="验证码">
					<u-input v-model="entity.vcode"  :clearable="false" placeholder="请输入验证码" />
					<u-button type="success" @click="sendVcode" :disabled="vcodeEntity.disable">{{ vcodeEntity.text }}</u-button>
				</u-form-item>
			</view>
		</view>

		<view class="button-box"><u-button class="btn" @click="login" type="success" shape="circle" style="width: 100%;">登录</u-button></view>
		
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips" navbar-height="50"></u-top-tips>
	</view>
</template>

<script>
import {LoginUtil} from '../../utils'
export default {
	data() {
		return {
			entity:{
				email:"",
				vcode:""
			},
			vcodeEntity:{
				text:"获取验证码",
				disable:false,
				count:60
			}
		};
	},
	onShow() {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle('dark');
		// #endif
	},
	methods:{
		login(){
			if(!this.entity.email|| this.entity.email.length == 0){
				this.$refs.uToast.show({
					title: '邮箱不能为空',
					position:"top",
					type: 'warning'
				})
				return;
			}
			if(!this.entity.vcode|| this.entity.vcode.length == 0){
				this.$refs.uToast.show({
					title: '验证码不能为空',
					position:"top",
					type: 'warning'
				})
				return;
			}
			
			this.$server.user.login(this.entity).then(res=>{
				const {data} = res;
				if(data.code == 200){
					LoginUtil.setToken(data.token);
					console.log(data)
					uni.redirectTo({
					    url:"../index/index"
					});
				}else{
					this.$refs.uToast.show({
						title: data.msg,
						position:"top",
						type: 'warning'
					})
				}
			})
		},
		sendVcode(){
			if(!this.entity.email|| this.entity.email.length == 0){
				this.$refs.uToast.show({
					title: '邮箱不能为空',
					position:"top",
					type: 'warning'
				})
				return;
			}
			
			const setBtnEvent = ()=>{
				const str = '秒后重试';
				this.vcodeEntity.disable = true;
				const slef = setInterval(()=>{
					this.vcodeEntity.count--;
					this.vcodeEntity.text = this.vcodeEntity.count+str;
					if(this.vcodeEntity.count == 0){
						this.vcodeEntity.count = 60;
						this.vcodeEntity.text = "获取验证码";
						this.vcodeEntity.disable = false;
						clearInterval(slef);
					}
				},1000);
			}
			
			
			this.$server.user.sendEmail(this.entity.email).then(res=>{
				const {data} = res;
				
				if(data.code == 200){
						this.$refs.uTips.show({
							title: '发送成功,请到邮箱中查看',
							type: 'success',
							position:"top",
							duration: '2300'
						})
					setBtnEvent();
				}else{
					this.$refs.uToast.show({
						title: '发送失败',
						position:"top",
						type: 'warning'
					})
				}
			})
		}

	}
};
</script>

<style lang="scss">
.login {
	position: relative;
	width: 100vw;
	height: 100vh;
	padding: 150rpx 15rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #f3f3f3;
	overflow: hidden !important;
	&::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-image: url(../../static/img/bg03.jpg);
		background-repeat: no-repeat;
		background-size: auto 100%;
		z-index: 1;
		filter: blur(60upx);
		margin: -60upx;
	}
	& * {
		z-index: 999;
	}

	.logo {
		display: block;
		padding-top: 120upx;
	}
	.logo image {
		width: 400upx;
	}

	.form-group {
		margin-top: 70upx;
		position: relative;
		width: 90%;
		background-color: #ffffff;
		display: block;
		padding: 15upx 40upx;
		border-radius: 10rpx;

		.form-group-item {
			padding: 10upx;
			& + .form-group-item {
				border-top: 1upx solid #f3f3f3;
			}
		}
	}
	.button-box {
		display: block;
		width: 100%;
		height: 100upx;
		margin-top: 70upx;
		padding: 5upx 80upx;
		.btn {
			height: inherit;
		}
	}
}
</style>
